<template>
  <view class="wrap">
    <view class="hd">
      <view class="comp">{{ detail.target_name }}</view>
      <view class="comp">{{ timeFormat(detail.start_time_text, 'yyyy-mm-dd hh:MM:ss') }}</view>
    </view>
    <view class="box">
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="name">{{ item.name }}</view>
          <view class="nos">
            <view class="kk">任职机构：{{ item.organ }}</view>
            <view class="kk">职位：{{ item.job }}</view>
          </view>
          <view class="nos">
            <view class="kk">参会手机：{{ item.mobile }}</view>
            <view class="kk">是否外呼：{{ item.is_out ? '是' : '否' }}</view>
          </view>
          <view class="time">签到时间： {{ timeFormat(item.sign_time, 'yyyy-mm-dd hh:MM:ss') }}</view>
        </view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    <view class="footer">
      <view class="pox">
        <view class="left">
          <view class="item" @click="openPopup">
            <view class="icon">
              <image src="../../static/export.png" class="img"></image>
            </view>
            <view class="test">导出报名信息</view>
          </view>
          <view class="item" @click="goSms">
            <view class="icon">
              <image src="../../static/sms.png" class="img"></image>
            </view>
            <view class="test">给报名人发短信</view>
          </view>
        </view>
        <view class="right">
          <button class="btn" hover-class="none" @click="goAdd">邀请参会</button>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-popup ref="popup" round='24rpx' bgColor='#FFFFFF' closeable>
      <view class="copes">
        <view class="bigTitle">复制链接</view>
        <view class="content">
          <view class='desc'>导出成功，请复制链接到浏览器下载文件</view>
          <view class='desc'>链接：{{ url }}</view>
        </view>
        <button class="btn" hover-class="none" @click="copeUrl">复制链接</button>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom, onShow, onHide } from '@dcloudio/uni-app'
import { post } from '@/api';
import { toast } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const popup = ref(null);
let id = '';
let detail = ref({});
let url = ref('');
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);
let isPage = false;

onLoad((option) => {
  id = option.id;
  getData();
})
onShow(() => {
  if(isPage){
    getData();
  }
})
onHide(() => {
  isPage = true;
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})

function getData(){
  post('api/survey/getSurveyDetail', { survey_id: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      getList();
      getUrlDown();
    }
  })
}
function getList(){
  const params = {
    page,
    limit,
    survey_id: id
  }
  post('api/survey/getSurveyEnrollList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function getUrlDown(){
  const params = {
    survey_id: id
  }
  post('api/survey/exportEnroll', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      url.value = data.download_url;
    }
  })
}
function copeUrl(){
  uni.setClipboardData({
  	data: url.value,
  	success: function () {
  		toast('复制成功');
      popup.value.close();
  	}
  });
}
function openPopup(){
  popup.value.open();
}
function goSms(){
  if(!list.value.length) return toast('暂无报名人');
  let all = list.value.map(e => {
    return e.mobile
  });
  uni.setStorageSync('phoneAll', all);
  uni.navigateTo({
    url: `/pages/invest/sms?id=${id}&name=${detail.value.target_name}`
  });
}
function goAdd(){
  uni.navigateTo({
    url: `/pages/invest/addPeople?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .copes{
    width: 80vw;
    padding-bottom: 40rpx;
    .btn{
      width: 226rpx;
      margin: 0 auto;
      margin-top: 70rpx;
    }
    .content{
      padding: 0 30rpx;
      .desc{
        font-weight: 400;
        font-size: 30rpx;
        color: #2B2B2B;
        word-wrap:break-word;
        word-break:break-all;
      }
    }
    .bigTitle{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      padding: 40rpx 0;
      text-align: center;
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #F5F5F5;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .item{
          margin-right: 24rpx;
          &:last-child{
            margin-right: 0;
          }
          .icon{
            width: 44rpx;
            height: 44rpx;
            font-size: 0;
            margin: 0 auto;
          }
          .test{
            font-weight: 400;
            font-size: 20rpx;
            color: #949494;
            padding-top: 4rpx;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        width: 0;
        .btn{
          flex: 1;
          width: 100%;
          max-width: 280rpx;
        }
      }
    }
  }
  .box{
    background-color: #fff;
    padding: 0 30rpx;
    .list{
      .item{
        padding: 40rpx 0;
        border-bottom: 1px solid #E6E6E6;
        &:last-child{
          border-bottom: 0;
        }
        .time{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 10rpx;
        }
        .nos{
          display: flex;
          align-items: center;
          width: 100%;
          padding-top: 10rpx;
          .kk{
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            padding-right: 20rpx;
            &:last-child{
              padding-right: 0;
            }
          }
        }
        .name{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
        }
      }
    }
  }
  .hd{
    width: 100%;
    background-color: #FFEDEB;
    padding: 20rpx 0;
    text-align: center;
    .comp{
      font-weight: 400;
      font-size: 24rpx;
      color: #E43222;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>